/**
 * Created by Administrator on 2016/6/6 0006.
 */
//获取dom节点
var myCanvas = document.getElementById("myCanvas");
var ctx = document.getElementById("myCanvas").getContext("2d");
var ctx1 = document.getElementById("myCanvas01").getContext("2d");
var ctx3 = document.getElementById("myCanvas03").getContext("2d");
var ctx2 = document.getElementById("myCanvas02").getContext("2d");
var tupBtn = document.getElementById("tupBtn");
var myinformation = document.getElementById("information");
var color = ["#ff1b22","#fbaa58","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
var info = ["谢谢参与","  1000","   10","  500","  100"," 4999","    1","   20"];
var info1 = ['再接再厉','      元','     元','  淘金币','     元','  淘金币','     元','  淘金币'];
//旋转角度
var angles;
//抽奖次数
var clickNum = 5;
//旋转次数
var rotNum = 0;
//中奖公告
var notice = null;
//储存抽中奖品
var noticeList = new Array();

window.onload = function(){
    canvasRun();

}
  function myClick(){

    if(clickNum >=1){
        console.log("抽奖次数："+clickNum);
        clickNum = clickNum - 1;
    //    转盘旋转
        runCup();
        //转盘旋转过程“开始抽奖”按钮无法点击
        tupBtn.disabled = true;
        //旋转次数加一
        rotNum = rotNum + 1;
        setTimeout(function(){
            alert(notice);
            tupBtn.disabled = false;
            ////这里运用了本地存储，可是怎么存储不同用户抽取的奖嘞？？
            //noticeList.push(notice);
            //console.log("奖品数组:" +noticeList);
            //localStorage.setItem("User",noticeList);

        },6000);
        //用input标签显示转盘获取的内容
        myinformation.value =notice ;

    }else{
        alert("亲，抽奖次数已经用光了！！");
    }

}
//


//转盘旋转
function runCup(){
    probability();
    console.log("旋转角度："+angles);
    var degValue = 'rotate(' + angles+'deg'+ ')';
    myCanvas.style.webkitTransform = degValue;
    //myCanvas.style.webkitTransition = "all 5s linear";//转盘旋转用时
}

//绘制转盘
function canvasRun(){
    initPoint();
    createCircle();
    createCirText();
}
//画圆圈和箭头
function initPoint(){
    //箭头指针
    ctx1.beginPath();
    ctx1.moveTo(100,24);
    ctx1.lineTo(90,62);
    ctx1.lineTo(110,62);
    ctx1.lineTo(100,24);
    ctx1.fillStyle = color[5];
    ctx1.fill();
    //ctx1.stroke();
    ctx1.closePath();
//    中间的小圆
    ctx3.beginPath();
    ctx3.arc(100,100,40,0,Math.PI*2,false);
    ctx3.fillStyle = color[5];
    ctx3.fill();
    ctx3.closePath();
//    小圆的文字
    ctx3.font = "20px 微软雅黑";
    ctx3.textAlign = "start";
    ctx3.textBaseline = "middle";
    ctx3.fillStyle = color[4];
    ctx3.beginPath();
    ctx3.fillText("开始",80,90,40);
    ctx3.fillText("抽奖",80,110,40);
    ctx3.fill();
    ctx3.closePath();

//   中间圆圈
    ctx2.beginPath();
    ctx2.arc(75,75,75,0,Math.PI/180*360,false);
    ctx2.fillStyle = color[2];
    ctx2.fill();
    ctx2.closePath();
}
//外圆
function createCircle(){
    var startAngle = 0;
    var endAngle = 0;
    //一个八等分的圆
    for (var i = 0; i< 8; i++){
        startAngle = Math.PI*(i/4-1/8);//Math.PI/180*45(i-1)刚刚在45度的边界上
        endAngle = startAngle+Math.PI*(1/4);
        ctx.save();
        ctx.beginPath();
        ctx.arc(150,150,100, startAngle, endAngle, false);
        ctx.lineWidth = 120;
        if (i%2 == 0) {
            ctx.strokeStyle =  color[0];
        }else{
            ctx.strokeStyle =  color[1];
        }
        ctx.stroke();
        ctx.restore();
    }
}
//各个奖项（一个八等分的圆以及圆上面的内容）
function createCirText(){
    ctx.textAlign = "start";
    ctx.textBaseline = "middle";
    ctx.fillStyle = color[3];
    var step = 2*Math.PI/8;//一个圆八等分每一份为45度
    for(var i=0;i<8;i++){
        ctx.save();
        ctx.beginPath();
        ctx.translate(150,150);
        ctx.rotate(i*step);
        ctx.font = "20px Microsoft YaHei";
        ctx.fillStyle = color[4];
        ctx.fillText(info[i],-30,-115,60);
        ctx.font = " 14px Microsoft YaHei";
        ctx.fillText(info1[i],-30,-95,60);//文本内容  左右（x）上下（y）允许最大文本宽度，以px为单位
        ctx.closePath();
        ctx.restore();
    }
}

//设置各个奖项对应的旋转角度及中奖公告内容
function probability(){
//    获取随机数
    var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
    console.log("随机数："+num);
    if(num == 0 ){
        //旋转角度=1440*旋转次数
        angles = 1440*rotNum +720;
        notice = info[0]+info1[0];
    }
    //概率
    else if ( num == 1 ) {
        angles = 1440 * rotNum + 765;
        notice = info[7] + info1[7];
    }
    //概率
    else if ( num == 2 ) {
        angles = 1440 * rotNum + 810;
        notice = info[6] + info1[6];
    }
    //概率
    else if ( num == 3 ) {
        angles = 1440 * rotNum + 855;
        notice = info[5] + info1[5];
    }
    //概率
    else if ( num == 4 ) {
        angles = 1440 * rotNum + 900;
        notice = info[4] + info1[4];
    }
    //概率
    else if ( num == 5 ) {
        angles = 1440 * rotNum + 945;
        notice = info[3] + info1[3];
    }
    //概率
    else if ( num == 6 ) {
        angles = 1440 * rotNum + 990;
        notice = info[2] + info1[2];
    }
    //概率
    else if ( num == 7 ) {
        angles = 1440 * rotNum + 1035;
        notice = info[1] + info1[1];
    }
}